<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="wrap">
		<view class="header">
			<view class="gold">
				{{$store.state.user.userInfo.gold}}
			</view>
			<view class="goldDesc">
				我的积分
			</view>
		</view>
		<view class="panel" style="margin-top: -85upx; ">
			<view class="panel-content">
				<u-cell-item v-if="!$store.state.user.userInfo.todayIsSign" title="今天还未签到" label="开通会员签到积分翻倍"
					:arrow="false" hover-class="none" :title-style="titleStyle">
					<u-button shape="circle" type="warning" size="medium" style=" width: 180upx;"
						@click="signHandler()">
						签到+{{vipConfig.signGetGold}}积分</u-button>
				</u-cell-item>
				<u-cell-item v-else title="今天已签到" label="开通会员签到积分翻倍" :arrow="false" hover-class="none"
					:title-style="titleStyle">
					<u-button shape="circle" type="warning" size="medium" style=" width: 180upx;" :disabled="true">
						已签到</u-button>
				</u-cell-item>
			</view>
		</view>
		<view style="padding: 0 30upx 0; margin-top: 50upx; font-size: 40rpx;">赚积分</view>
		<view class="panel">
			<view class="panel-content">
				<u-cell-item icon="share" :iconStyle="{ color: '#fc0107'}" icon-size="60rpx" title="邀请好友"
					:label="'邀请一个好友获得'+vipConfig.inviteGetGold+'积分'" :arrow="false" hover-class="none"
					:title-style="titleStyle">
					<u-button shape="circle" :hair-line="false" size="medium" style=" width: 100upx;"
						@click="navTo('/pages/my/share2')">去邀请
					</u-button>
				</u-cell-item>
			</view>
		</view>
		<view style="padding: 0 30upx 0; margin-top: 50upx; font-size: 40rpx;">赚分用途</view>
		<view class="panel">
			<view class="panel-content">
				<u-cell-item icon="plus-people-fill" :iconStyle="{ color: '#0f80ff'}" icon-size="60rpx" title="发布群"
					:label="'发布群需要消耗'+vipConfig.pubQrcodeGold+'积分'" :arrow="false" hover-class="none"
					:title-style="titleStyle">
					<u-button shape="circle" :hair-line="false" size="medium" style=" width: 100upx;"
						@click="navTo('/pages/my/qunCard-add')">去发布
					</u-button>
				</u-cell-item>
				<u-cell-item icon="arrow-upward" :iconStyle="{ color: '#fd8008'}" icon-size="60rpx" title="置顶群"
					:label="vipConfig.topQrcodeGold+'积分可置顶一分钟'" :arrow="false" hover-class="none"
					:title-style="titleStyle">
					<u-button shape="circle" :hair-line="false" size="medium" style=" width: 100upx;"
						@click="navTo('/pages/my/qunCard')">去置顶
					</u-button>
				</u-cell-item>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					'color': "#303133",
					'font-size': '40rpx'
				},
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#e5e9f0',
					background: '#e5e9f0',

				},
				vipConfig: {} //当前会员配置
			}
		},
		onLoad() {
			this.getVipConfigInfo()
		},
		methods: {
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			/**
			 * 签到
			 */
			signHandler() {
				this.$api.api('user.sign')
					.then(res => {
						if (res.code == 200) {
							this.$store.dispatch('getUserInfo')
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 获取用户当前所属会员的配置信息
			 */
			getVipConfigInfo() {
				this.$api.api('config.vip')
					.then(res => {
						if (res.code == 200) {
							if (this.$store.state.user.userInfo.vipLevel == 0) {
								this.vipConfig = res.data.normal
							} else if (this.$store.state.user.userInfo.vipLevel == 1) {
								this.vipConfig = res.data.vip
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.header {
		background: linear-gradient(#f8f8f8, #d7e3f0);
		height: 400upx;

		.gold {
			display: flex;
			justify-content: center;
			font-size: 120rpx;
			margin-top: 60rpx;
		}

		.goldDesc {
			display: flex;
			justify-content: center;
			font-size: 30rpx;
		}
	}

	.panel {
		padding: 0 30upx 0;
		// color: black;

		.panel-content {
			background: white;
			margin: 0 auto;
			border-radius: 16upx; //面包圆形倒角
			box-shadow: 0 2upx 20upx rgba(183, 183, 183, 0.3); //周边阴影
			margin-top: 16upx; //顶部间隔
		}
	}
</style>
